<template>
    <div class="body">
        <p class="title">我的地址管理</p>
        <div class="address-item" v-for="(i,index) of addressList" :key="index">
            <i class="iconfont icon-web-icon- moren-icon" v-show="i.is_default"></i>
            <div class="address-check-box">
                <p class="iconfont" :class="check_id==i.id?'icon-xuanze2':'icon-choose'" @click="checkSelected(i)"></p>
                <div>
                    <p class="address-title">{{$store.getters.userInfo.school_name}}-{{i.dormitory_name}}-{{i.floor_name}}-{{i.address}}</p>
                    <p>{{i.name}}-{{i.phone}}</p>
                </div>
            </div>
            <div class="btn-group">
                <!-- <router-link :to="{path:'/addressInfo',query:{type:1}}"> -->
                <mt-button class="btn btn-1" @click="toAddressInfo(i)">编辑</mt-button>
                <!-- </router-link> -->
                <mt-button class="btn btn-1" v-if="addressList.length>1" @click="delAddress(i.id)">删除</mt-button></div>
        </div>
        <section class="login_message login_out">
            <router-link :to="{path:'/addressInfo',query:{type:2}}">
                <mt-button class="btn">新增地址</mt-button>
            </router-link>
        </section>
    </div>
</template>
<script>
import {addressList,delAddress} from '../api'
import {Toast} from 'mint-ui'
export default {
    data() {
        return {
            addressList:[],
            checked:true,
            check_id:this.$store.getters.userInfo.address_id
        }
    },
    created(){
        this.getAddressList()
    },
    methods:{
        toAddressInfo(i){
            this.$store.commit('ADDRESSINFO',i);
        },
        checkSelected(item){
            // console.log(item);
            this.check_id = item.id;
            Toast("切换成功");
            this.$store.commit("UPDATE_ADDRESS",item)
        },
        delAddress(id){
            const data = {
                id,
                token:this.$store.getters.token,
                user_id:this.$store.getters.userInfo.id
            }
            delAddress(data).then(res=>{
                Toast(res.msg);
                if(res.code == 200){
                    this.getAddressList().then(res=>{
                        if(this.$store.getters.userInfo.address_id == id){
                            this.checkSelected(this.addressList[0]);
                        };
                    });
                }
            })
        },
        async getAddressList(){
            const data = {
                user_id:this.$store.getters.userInfo.id,
                token:this.$store.getters.token
            }
            addressList(data).then(res=>{
                // console.log(res);
                this.addressList = res.data;
                return true;
            })
        }
    }
}
</script>
<style scoped>
    .body{
        padding:0 1rem;
    }
    .title{
        font-size: 0.8rem;
        color: #666;
    }
    .address-item{
        border-bottom: 0.05rem solid #ccc;
        position: relative;
    }
    .address-item p{
        line-height: 2rem;
        font-size: 1rem;
        color: #666;
    }
    .address-title{
        font-size: 1.2rem !important;
    }
    .moren-icon{
        font-size: 3rem;
        position: absolute;
        top: -0.5rem;
        right: -1rem;
        color: #F0463C;
    }
    .btn-group{
        text-align:right
    }
    .btn-group .btn-1{
        display: inline-block;
        width: 3rem;
        height: 1.5rem;
        margin: 0.4rem 0.5rem;
        font-size: 0.8rem;
        background: #fff;
        color: #333;
        border:0.04rem solid #333;
    }
    .btn {
        background: #F0463C;
        width: 80%;
        color: white;
        height: 3rem;
        font-size: 1rem;
        margin: 1rem auto;
        border-radius: 5px;
    }
    .address-check-box{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .address-check-box div:last-child{
        width: 80%;
    }
</style>